<template>
	<view class="container">
		<view v-if="currentTab === 2" class="message-container">
			<view class="message-header">
				<text class="message-title">消息中心</text>
			</view>
			<scroll-view scroll-y class="message-list">
				<view v-for="(item, index) in messageList" :key="index" class="message-item">
					<view class="message-avatar">
						<image :src="item.avatar" mode="aspectFill" />
						<view v-if="item.unread > 0" class="unread-badge">{{item.unread}}</view>
					</view>
					<view class="message-content">
						<view class="message-top">
							<text class="message-name">{{item.name}}</text>
							<text class="message-time">{{item.time}}</text>
						</view>
						<text class="message-text">{{item.lastMessage}}</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 功能区域 -->
		<view class="function-area" v-if="currentTab !== 2">
			<view class="function-item" v-for="(item, index) in functionList" :key="index">
				<image :src="item.image" mode="aspectFill" class="function-image" />
				<text class="function-text">{{ item.title }}</text>
			</view>
		</view>
		<!-- 订单发布区域 -->
		<view class="publish-area" v-if="currentTab !== 2">
			<view class="publish-header">
				<text class="section-title">发布订单</text>
				<uni-icons type="right" size="16" color="#666"></uni-icons>
			</view>
			<view class="publish-content">
				<view class="publish-btn send">
					<uni-icons type="paperplane" size="24" color="#FFFFFF"></uni-icons>
					<text>发布寄件</text>
				</view>
				<view class="publish-btn receive">
					<uni-icons type="download" size="24" color="#FFFFFF"></uni-icons>
					<text>发布代取</text>
				</view>
			</view>
		</view>
		<!-- 订单列表区域 -->
		<view class="order-area" v-if="currentTab !== 2">
			<view class="order-header">
				<text class="section-title">最新订单</text>
				<text class="more-text">查看更多</text>
			</view>
			<view class="order-list">
				<view class="order-item" v-for="(item, index) in orderList" :key="index">
					<view class="order-top">
						<text class="order-type">{{ item.type }}</text>
						<text class="order-status">{{ item.status }}</text>
					</view>
					<view class="order-info">
						<text class="order-address">{{ item.address }}</text>
						<text class="order-price">￥{{ item.price }}</text>
					</view>
					<view class="order-bottom">
						<text class="order-time">{{ item.time }}</text>
						<uni-button size="mini" type="primary" class="grab-btn">立即抢单</uni-button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script lang="ts" setup>
	import { ref } from 'vue';
	const currentTab = ref(2);
	const messageList = ref([
		{
			avatar: 'https://ai-public.mastergo.com/ai/img_res/4abc3389f01173ec61b6f2583b36fe6d.jpg',
			name: '快递小哥李师傅',
			lastMessage: '您好，您的快递已经到达菜鸟驿站',
			time: '10:30',
			unread: 2
		},
		{
			avatar: 'https://ai-public.mastergo.com/ai/img_res/24f6130a55d0f1bb9661a19dcf583a55.jpg',
			name: '系统通知',
			lastMessage: '您有一个新的订单待处理',
			time: '09:15',
			unread: 1
		},
		{
			avatar: 'https://ai-public.mastergo.com/ai/img_res/bb2e6b74aa6a9db3cfee302896fe23af.jpg',
			name: '客服中心',
			lastMessage: '如果您有任何问题，随时联系我们',
			time: '昨天',
			unread: 0
		}
	]);
	const functionList = ref([
		{
			title: '快递查询',
			image: 'https://ai-public.mastergo.com/ai/img_res/fcae0921e7cf8b6391200b4d3ccff8b7.jpg'
		},
		{
			title: '订单管理',
			image: 'https://ai-public.mastergo.com/ai/img_res/2c9f9811c66c593b6ebda6a52705a766.jpg'
		},
		{
			title: '我的接单',
			image: 'https://ai-public.mastergo.com/ai/img_res/ba9fc0347420b4e6d064b95f375997c0.jpg'
		},
		{
			title: '个人中心',
			image: 'https://ai-public.mastergo.com/ai/img_res/cb0de62a1cf6fed968ab2237cb081298.jpg'
		}
	]);
	const orderList = ref([
		{
			type: '代取快递',
			status: '待抢单',
			address: '菜鸟驿站 - 大学城南苑',
			price: '5',
			time: '10分钟前'
		},
		{
			type: '寄件服务',
			status: '待抢单',
			address: '大学城北苑 - 顺丰快递',
			price: '8',
			time: '15分钟前'
		},
		{
			type: '代取快递',
			status: '待抢单',
			address: '京东快递 - 大学城东苑',
			price: '6',
			time: '20分钟前'
		}
	]);
	const tabList = ref([
		{ title: '首页', icon: 'home' },
		{ title: '订单', icon: 'list' },
		{ title: '消息', icon: 'chat' },
		{ title: '我的', icon: 'person' }
	]);
</script>
<style>
	page {
		height: 100%;
	}

	.container {
		min-height: 100%;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
	}

	.function-area {
		display: flex;
		flex-wrap: wrap;
		padding: 30rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
	}

	.function-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.function-image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 20rpx;
	}

	.function-text {
		margin-top: 10rpx;
		font-size: 12px;
		color: #333333;
	}

	.publish-area {
		margin-top: 20rpx;
		background-color: #ffffff;
		padding: 30rpx;
	}

	.publish-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 16px;
		font-weight: bold;
		color: #333333;
	}

	.publish-content {
		display: flex;
		justify-content: space-between;
	}

	.publish-btn {
		width: 330rpx;
		height: 160rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.publish-btn text {
		margin-top: 20rpx;
		color: #ffffff;
		font-size: 14px;
	}

	.send {
		background: linear-gradient(135deg, #2979ff, #1565c0);
	}

	.receive {
		background: linear-gradient(135deg, #00b0ff, #0277bd);
	}

	.order-area {
		margin-top: 20rpx;
		background-color: #ffffff;
		padding: 30rpx;
		flex: 1;
	}

	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.more-text {
		font-size: 12px;
		color: #666666;
	}

	.order-item {
		background-color: #f8f8f8;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.order-top {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.order-type {
		font-size: 14px;
		color: #333333;
		font-weight: bold;
	}

	.order-status {
		font-size: 12px;
		color: #2979ff;
	}

	.order-info {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.order-address {
		font-size: 14px;
		color: #666666;
	}

	.order-price {
		font-size: 16px;
		color: #ff3d00;
		font-weight: bold;
	}

	.order-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.order-time {
		font-size: 12px;
		color: #999999;
	}

	.grab-btn {
		margin: 0;
	}

	.tab-bar {
		height: 100rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1px solid #eeeeee;
		flex-shrink: 0;
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tab-text {
		margin-top: 6rpx;
		font-size: 12px;
		color: #666666;
	}

	.tab-text.active {
		color: #2979ff;
	}

	.message-container {
		flex: 1;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}

	.message-header {
		padding: 30rpx;
		background-color: #ffffff;
	}

	.message-title {
		font-size: 18px;
		font-weight: bold;
		color: #333333;
	}

	.message-list {
		flex: 1;
		overflow: auto;
	}

	.message-item {
		display: flex;
		padding: 30rpx;
		background-color: #ffffff;
		margin-top: 2rpx;
	}

	.message-avatar {
		position: relative;
		width: 100rpx;
		height: 100rpx;
		margin-right: 20rpx;
	}

	.message-avatar image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.unread-badge {
		position: absolute;
		top: -6rpx;
		right: -6rpx;
		min-width: 36rpx;
		height: 36rpx;
		padding: 0 10rpx;
		background-color: #ff3d00;
		border-radius: 18rpx;
		color: #ffffff;
		font-size: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.message-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.message-top {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.message-name {
		font-size: 16px;
		color: #333333;
		font-weight: 500;
	}

	.message-time {
		font-size: 12px;
		color: #999999;
	}

	.message-text {
		font-size: 14px;
		color: #666666;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>